import React from 'react';
import { Component } from 'react';
//import BannerItem from './bannerItem/BannerItem.jsx';
import { Carousel, Flex } from 'antd-mobile';

require('./Carousel.less');

export default class CarouselBlock extends Component {
  constructor() {
      super();
      this.state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
        slideIndex: 2,
      }
  }
  
  componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
      });
    }, 100);
  }
  componentDidUpdate() {
    // After the new child element is rendered, change the slideIndex
    if (this.state.slideIndex !== this.state.data.length - 1) {
      /* eslint react/no-did-update-set-state: 0 */
      this.setState({ slideIndex: this.state.data.length - 1 });
    }
  }
  render() {
      const data = [
        {src:"client/images/1.png", name: "111"},
        {src:"client/images/2.png", name: "222"},
        {src:"client/images/3.png", name: "333"},
        {src:"client/images/4.png", name: "444"},
        {src:"client/images/5.png", name: "555"},
        {src:"client/images/6.png", name: "666"},
        {src:"client/images/7.png", name: "777"},
        {src:"client/images/8.png", name: "888"},
        {src:"client/images/8.png", name: "aaa"},
        {src:"client/images/7.png", name: "bbb"},
        {src:"client/images/6.png", name: "ccc"},
        {src:"client/images/5.png", name: "ddd"},
        {src:"client/images/4.png", name: "eee"},
        {src:"client/images/3.png", name: "fff"}
    ];
    while(data.length%8!==0){
      data.push({});
    }
    var array = [], temp_arr = [];
    data.forEach((item, i)=>{
      temp_arr.push(item);
      if((i+1)%8==0){
        array.push(temp_arr.concat());
        temp_arr = [];
      }
    });

  
      
    return (
      <Carousel
          autoplay={false}
          infinite
          selectedIndex={this.state.slideIndex}
          // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          // afterChange={index => console.log('slide to', index)}
          style={{paddingBottom: "1rem"}}
        >
        {
          array.map(arr=>
            <Flex wrap="wrap">
              {
                arr.map(item=>
                  <div 
                    style={{
                      width: PAGE_WIDTH/4-PAGE_WIDTH/16, 
                      height: PAGE_WIDTH/4-PAGE_WIDTH/16,
                      margin:PAGE_WIDTH/64+"px "+PAGE_WIDTH/32+"px",
                      textAlign: 'center'
                    }}
                  >
                    {item.src&&<img src={item.src} style={{width:0.8*(PAGE_WIDTH/4-PAGE_WIDTH/16), height:0.8*(PAGE_WIDTH/4-PAGE_WIDTH/16), borderRadius:'50%'}}></img>}
                    {item.name&& <div className="small">{item.name}</div>}
                  </div>
                )
              }
            </Flex>
          )
        }
      </Carousel>
        
    )
  }
};